<template>
  <div>
    <canvas ref="canvasRef" width="800" height="600"></canvas>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const canvasRef = ref(null);
const scale = ref(1);
const image = new Image();
image.src = 'https://picsum.photos/800/600';

const drawImage = () => {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.scale(scale.value, scale.value);
  ctx.drawImage(image, 0, 0);
};

const zoomIn = () => {
  scale.value += 0.1;
  drawImage();
};

const zoomOut = () => {
  if (scale.value > 0.1) {
    scale.value -= 0.1;
    drawImage();
  }
};

onMounted(() => {
  image.onload = () => {
    drawImage();
  };
});
</script>    